import React, { useEffect, useState } from 'react'

import './index.scss'
// 所有房屋配置项
const HOUSE_PACKAGE = [
    {
        id: 1,
        name: '衣柜',
        icon: 'icon-wardrobe'
    },
    {
        id: 2,
        name: '洗衣机',
        icon: 'icon-wash'
    },
    {
        id: 3,
        name: '空调',
        icon: 'icon-air'
    },
    {
        id: 4,
        name: '天然气',
        icon: 'icon-gas'
    },
    {
        id: 5,
        name: '冰箱',
        icon: 'icon-ref'
    },
    {
        id: 6,
        name: '暖气',
        icon: 'icon-Heat'
    },
    {
        id: 7,
        name: '电视',
        icon: 'icon-vid'
    },
    {
        id: 8,
        name: '热水器',
        icon: 'icon-heater'
    },
    {
        id: 9,
        name: '宽带',
        icon: 'icon-broadband'
    },
    {
        id: 10,
        name: '沙发',
        icon: 'icon-sofa'
    }
]
export default function HousePackage({onSelect,list,select}) {
    const [isChecked, setIsChecked] = useState([])
    function checked(val) {
        let newIsChecked = []
        newIsChecked = isChecked
        if (isChecked.indexOf(val) > -1) {
            newIsChecked = isChecked.filter(item => item !== val)
        } else {
            newIsChecked = [...isChecked, val]
        }
        setIsChecked(newIsChecked)
        onSelect(newIsChecked)
    }
    function renderItems(){
        let data
        if(select){
            data = HOUSE_PACKAGE
        }else {
            if(list?.length > 0){
                data = HOUSE_PACKAGE.filter(item => list.includes(item.name))
            }else {
                data = []
            }
            
        }
        return data.map(item => {
            const isSelected = isChecked.indexOf(item.name) > -1
            return (
                <li className={['item', isSelected ? 'active' : ''].join(' ')} key={item.id} onClick={() => checked(item.name)}>
                    <p>
                        <i className={['iconfont', item.icon].join(' ')}></i>
                    </p>
                    {item.name}
                </li>)
        })
    }
    useEffect(() => {

    }, [])
    return (
        <div className='house__package'>
            <ul className='house__package__content'>
                {renderItems()}
            </ul>
        </div>
    )
}
